<template>
  <div class="map">
    <div id="map_box" class="map_box" :style="{ height: (fullHeight-114) + 'px' }">
    </div>
    <div class="tj_icon" @click="openDrawer">
      <img :src="tongji" style="width:40px;cursor: pointer;" />
    </div>
    <div class="butbox">
      <div>
        <img @click="fullScreenEvent" :src="quanping" />
      </div>
      <div>
        <el-popover placement="top" title="图层选择" trigger="click">
          <img style="display: table-cell;vertical-align: middle;" slot="reference" :src="tuceng" />
        </el-popover>
      </div>
      <div>
        <img @click="toPumpInfo" style="display: table-cell;vertical-align: middle;" :src="baojing" />
      </div>
      <div>
        <img slot="reference" @click="dq" :src="dangqian" />
      </div>
    </div>
    <!-- 泵房总览 -->
    <el-drawer title="监测点总览" :visible.sync="monitoDrawer" :direction="direction" :before-close="handleClose" :style="{ height: fullHeight + 'px' }">
      <img :src="zhedie" style="width:20px;cursor: pointer;position:absolute;top:25px;left:15px" @click="monitoDrawer = false" />
      <i class="el-icon-close" style="z-index:999;cursor: pointer;position: absolute;top: 25px;right: 20px;" @click="monitoDrawer = false" />
      <div class="drawerContent">
        <div>
          <div class="title">运行状态</div>
          <div class="bot">
            <div style="width:50%;">
              <OnOfflineRate :onOffData="onOffData" />
            </div>
            <div style="width:50%;" class="botRigCharts">
              <AlarmRate :alarmRateData="alarmRateData" />
            </div>
          </div>
        </div>
        <div style="margin-top:-30px;">
          <div class="title">水压合格率</div>
          <div>
            <div style="display:flex;justify-content:center">
              <pressureRate :pressureRateData="pressureRateData" />
            </div>
          </div>
        </div>
        <div style="margin-top:-30px;">
          <div class="title">水质合格率</div>
          <div class="bot">
            <div style="width:33%;">
              <TurbidityRate :turbidityRateData="turbidityRateData" />
            </div>
            <div style="width:33%;">
              <ResChlorineRate :resChlorineRateData="resChlorineRateData" />
            </div>
            <div style="width:33%;">
              <pHRate :pHRateData="pHRateData" />
            </div>
          </div>
        </div>
        <div style="margin-top:-24px">
          <div class="title">主控点压力</div>
          <div style="margin-top:10px;">
            <el-table :data="pressureListData" style="width: 100%" height="170" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column label="序号" type="index" width="50" align="center">
              </el-table-column>
              <el-table-column prop="monitor_point_name" label="监测点名称" width="100" align="center">
              </el-table-column>
              <el-table-column prop="pipe_pressure" label="压力(MPa)" width="100" align="center">
              </el-table-column>
              <el-table-column prop="pipe_pressure_avg" label="今日平均" width="80" align="center">
              </el-table-column>
              <el-table-column prop="create_date" label="上传时间" width="160" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import OnOfflineRate from "./../components/on_OfflineRate";
import AlarmRate from "./../components/alarmRate";
import pressureRate from "./../components/pressureRate";
import TurbidityRate from "./../components/turbidityRate";
import ResChlorineRate from "./../components/resChlorineRate";
import pHRate from "./../components/pHRate";
import tongji from "@/assets/image/fireCont/展开.svg";
import zhedie from "@/assets/image/fireCont/折叠.svg";
import quanping from "@/assets/image/fireCont/ic_quanping.svg";
import tuceng from "@/assets/image/fireCont/ic_tuceng.svg";
import baojing from "@/assets/image/fireCont/ic_baojing.svg";
import dangqian from "@/assets/image/fireCont/ic_dangqian.svg";
import pumpIc from '../image/pump.png';
import {
  searchflPumpMonitorPoint, //管网查询
  getflPumpTodayOutflowElectric, //今日供水量、今日耗电量、吨水电耗
  selectPipeStateCount,//查询管网(水厂、泵房)在线离线数量
  selectAlertCount,//查询管网(水厂、泵房)-红黄报警饼图
  selectNetworkMonitor,//查询管网(水厂、泵房)-水压、水质合格率饼图
  getPipePressureList, //查询主控点压力
  getRealtimeReportData,//查询实时数据(泵房总览-泵房列表)
} from "@/api/schedule/base/flOverviewPump/index";
export default {
  components: {
    tongji,
    zhedie,
    quanping,
    pumpIc,
    OnOfflineRate,
    AlarmRate,
    pressureRate,
    TurbidityRate,
    ResChlorineRate,
    pHRate
  },
  data () {
    return {
      onOffData: {},
      alarmRateData: {},
      pressureRateData: {},
      turbidityRateData: {},
      resChlorineRateData: {},
      pHRateData: {},
      fullHeight: window.innerHeight,
      zoom: 17,
      isFullScren: "",
      monitorPointList: [],
      markers: [],
      center: [114.086169, 22.543606],
      tongji: tongji,
      zhedie: zhedie,
      quanping: quanping,
      tuceng: tuceng,
      baojing: baojing,
      dangqian: dangqian,
      pumpIc: pumpIc,
      monitoDrawer: false,
      direction: 'rtl',
      pressureListData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '王小虎'
      }]
    }
  },
  mounted () {
    this.getPumpMonitorPoint()
    this.handlePumpTodayOutflowElectric()
    // this.handlePipeStateCount()
  },
  methods: {
    openDrawer () {
      this.monitoDrawer = true
      this.handlePipeStateCount() //获取在线离线率
      this.handleAlertCount() //获取红黄报警饼图
      this.handleNetworkMonitor() //获取管网(水厂、泵房)-水压、水质合格率饼图
      this.handlePipePressureList()
    },
    getPumpMonitorPoint () {
      let obj = { type: 3 }
      searchflPumpMonitorPoint(obj).then(response => {
        this.monitorPointList = response.data
        this.monitorPointList.map(item => {
          let reportObj = {
            monitorPointId: item.id,
            type: 3
          }
          let reportDataObj = {}
          getRealtimeReportData(reportObj).then(response => {
            reportDataObj = response.data[0]
            item['reportDataObj'] = reportDataObj
            this.initMap()
          }).catch(err => {
          })
        })
      }).catch();
    },
    initMap () {
      var that = this
      let marker, map = new AMap.Map('map_box', {
        rotateEnable: true,
        pitchEnable: true,
        zoom: that.zoom,
        pitch: 75,
        rotation: -15,
        viewMode: '3D', //开启3D视图,默认为关闭
        center: that.center,
        terrain: true,
      });
      that.map = map
      //3D罗盘
      let controlBar = new AMap.ControlBar({
        position: {
          right: '7px',
          bottom: '130px'
        }
      });
      controlBar.addTo(map);
      //缩放
      let toolBar = new AMap.ToolBar({
        position: {
          right: '37px',
          bottom: '50px'
        }
      });
      toolBar.addTo(map);
      this.monitorPointList.map(item => {
        if (item.location) {
          let markerContent
          if(item.classify == 74) {
             markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>管网水压</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.pipePressure == undefined ? "" : item.reportDataObj.pipePressure}</div>
               </div>
             </div>
             <img src="${pumpIc}" style="width:35px;height:35px;"/>
           </div>`
          }
          else if(item.classify == 75) {
             markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>管网流量</div>
                 <div>管网今日供水量</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.pipeFlow == undefined ? "" : item.reportDataObj.pipeFlow}</div>
                 <div>${item.reportDataObj.pipeFlowToday == undefined ? "" : item.reportDataObj.pipeFlowToday}</div>
               </div>
             </div>
             <img src="${pumpIc}" style="width:35px;height:35px;"/>
           </div>`
          } else {
            markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>管网浊度</div>
                 <div>管网余氯</div>
                 <div>管网PH</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.pipeTurbidity == undefined ? "" : item.reportDataObj.pipeTurbidity}</div>
                 <div>${item.reportDataObj.pipeChlorine == undefined ? "" : item.reportDataObj.pipeChlorine}</div>
                 <div>${item.reportDataObj.pipePh == undefined ? "" : item.reportDataObj.pipePh}</div>
               </div>
             </div>
             <img src="${pumpIc}" style="width:35px;height:35px;"/>
           </div>`
          }
          let location = item.location.split(",")
          marker = new AMap.Marker({
            map: map,
            position: [location[0], location[1]],
            content: markerContent,
            offset: new AMap.Pixel(-13, -30)
          });
          marker.on('click', function (e) {
            // console.log(e)
            // debugger;
            that.$router.push({
              path: '/guanWangDiaoDu/pipeRealtime',
              query: { id: item.id,active:'2'}
            })
          });
          that.markers.push(marker)
        }
      })
    },
    handlePumpTodayOutflowElectric () {
      let obj = { type: 3 }
      getflPumpTodayOutflowElectric(obj).then(response => {
        let todayData = response.data
        console.log(todayData)
      }).catch();
    },
    //获取在线离线率
    handlePipeStateCount () {
      let obj = { monitorPointType: 3 }
      selectPipeStateCount(obj).then(response => {
        this.onOffData = response.data
      }).catch();
    },
    //获取红黄报警饼图
    handleAlertCount () {
      let obj = { type: 3 }
      selectAlertCount(obj).then(response => {
        this.alarmRateData = response.data
        console.log(this.alarmRateData)
        debugger;
      }).catch();
    },
    //获取管网(水厂、泵房)-水压、水质合格率饼图
    handleNetworkMonitor () {
      let pressureObj = {
        type: 3,
        params: ['pressure']
      }
      let turbidityObj = {
        type: 3,
        params: ['turbidity']
      }
      let resChlorineObj = {
        type: 3,
        params: ['chlorine']
      }
      let phObj = {
        type: 3,
        params: ['ph']
      }
      selectNetworkMonitor(pressureObj).then(response => {
        this.pressureRateData = response.data[0]
      }).catch();
      selectNetworkMonitor(turbidityObj).then(response => {
        this.turbidityRateData = response.data[0]
      }).catch();
      selectNetworkMonitor(resChlorineObj).then(response => {
        this.resChlorineRateData = response.data[0]
      }).catch();
      selectNetworkMonitor(phObj).then(response => {
        this.pHRateData = response.data[0]
      }).catch();
    },
    //查询实时数据(泵房总览-泵房列表)
    // handleRealtimeReportData () {
    //   let obj = { type: 3 }
    //   getRealtimeReportData(obj).then(response => {
    //     this.pumpListData = response.data
    //     console.log(this.pumpListData)
    //     debugger;
    //   }).catch();
    // },
    //查询压力列表
    handlePipePressureList () {
      let obj = { type: 1 }
      getPipePressureList(obj).then(response => {
        this.pressureListData = response.data
        console.log(this.pressureListData)
        debugger;
      }).catch();
    },
    //绑定全屏监听事件
    addEventListener () {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;
      isFullscreen = !!isFullscreen;
      let that = this;
      document.addEventListener("fullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("mozfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("webkitfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("msfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
    },
    //点击全屏事件
    fullScreenEvent () {
      let el = document.documentElement;
      if (this.isFullScren) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullScreen) {
          el.webkitRequestFullScreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        }
      }
    },
    //刷新
    dq () {
      this.center = ""
      this.zoom = 17
      this.fireHydantName = ""
      this.initMap()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    toPumpInfo () {
      this.$router.push({
        path: '/bengFangDiaoDu/flSupplyPump'
      })
    }
  }
}
</script>
<style>
.map {
  position: relative;
}
.tj_icon {
  position: absolute;
  right: 36px;
  top: 25px;
}
#map_box {
  margin: 0;
  padding: 0;
  width: 100%;
}
.el-drawer__open .el-drawer.rtl {
  width: 420px !important;
  margin-top: 115px;
}
.butbox {
  background: #fff;
  margin-left: 40%;
  width: 20%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 50px;
  box-shadow: 0px 12px 12px 0px rgba(0, 0, 0, 0.1);
}
.butbox div {
  cursor: pointer;
}
.butbox > div > img {
  display: table-cell;
  vertical-align: middle;
}
.el-drawer__header > :first-child {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #414141;
}
.title {
  margin-left: 25px;
  height: 24px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
}
.line {
  display: flex;
  justify-content: space-around;
}
.monitj_icon {
  margin: 12px 0 0 0;
}
.trem {
  width: 110px;
  text-align: center;
}
.count {
  /* height: 36px; */
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  /* line-height: 42px; */
  text-align: center;
}
.ident {
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a4a5a6;
  line-height: 22px;
}
.bot {
  display: flex;
  justify-content: space-between;
}
.amap-icon img {
  width: 45px;
}
/* .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
} */
.card {
  width: 295px;
  height: 250px;
  padding: 10px 20px;
  position: relative;
  bottom: 20px;
}
.name {
  font-size: 16px;
  background: #fff;
  color: #0b9ac3;
  font-weight: 700;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: relative;
  right: 108px;
}
.card_content {
  background: #fff;
  font-size: 14px;
  color: #000000;
  padding: 0 10px 10px 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
  right: 108px;
  display: flex;
}
.card_left {
  width: 120px;
}
.card_right {
  width: 130px;
}
.date {
  width:130px;
}
</style>